<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Form</title>
    <link rel="stylesheet" href="./login.css" />
  </head>
  <body>
    <div class="signup-form-container">
      <h2>Login</h2>
      <form id="login-form">
        <label for="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="Enter your email"
          required
        />

        <label for="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Enter your password"
          required
        />

        <div class="next">
          <input type="submit" id="submitBtn" value="Login" />
          <button id="google-login" style="color: black;font-family:var(--ff-poppins); background-image: url(); background-repeat: no-repeat; background-position: 25% 50%; background-size: 30px;"><a href="https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F%3Futm_source%3Dsign_in_no_continue%26pli%3D1%26nlr%3D1&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1211316509%3A1729920929255114&ddm=0">Login with Google</a></button>

          <button id="facbook-login" style="color: black;font-family:var(--ff-poppins); background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg); background-repeat: no-repeat; background-position: 25% 50%; background-size: 30px;"><a href="https://www.facebook.com/login/">Login with facebook</a></button>
          <button id="x-login" style="color: black;font-family:var(--ff-poppins); background-image: url(https://img.freepik.com/free-vector/twitter-new-2023-x-logo-white-background-vector_1017-45422.jpg?t=st=1729705399~exp=1729708999~hmac=86164ca5278d72d1e806212a9399b9f1d09e5db1559733d42425370dbca91851&w=826); background-repeat: no-repeat; background-position: 25% 50%; background-size: 30px;"><a href="https://x.com/i/flow/login">Login with X</a></button>
        </div>
      </form>

      <div id="form-message" class="form-message"></div>
      <div class="link"><a href="../signup/signup.html">Don't have an account?</a></div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Allowed email domains
        const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];

        // Form submission handler
        document
          .getElementById("login-form")
          .addEventListener("submit", function (event) {
            event.preventDefault(); // Prevent form submission

            const enteredEmail = document.getElementById("email").value;
            const emailDomain = enteredEmail.split("@").pop();

            // Check if the email domain is allowed
            if (!allowedDomains.includes(emailDomain)) {
              document.getElementById("form-message").innerText =
                "Invalid email domain. Please use Gmail, Outlook, Yahoo, protonmail, icloud, or tutanota." ;
              return; // Stop form submission
            }

            const enteredPassword = document.getElementById("password").value;

            // Load stored data from localStorage
            const storedSignupData = localStorage.getItem("signupData");

            if (storedSignupData) {
              const storedData = JSON.parse(storedSignupData);

              // Verify if the entered email and password match stored data
              if (
                enteredEmail === storedData.email &&
                enteredPassword === storedData.password
              ) {
                // Successful login
                document.getElementById("form-message").innerText =
                  "Login successful!";
                  
                setTimeout(function () {
                  window.location.href = "../index.html"; // Redirect to home page
                }, 100);
              } else {
                // Failed login
                document.getElementById("form-message").innerText =
                  "Invalid email or password. Please try again.";
              }
            } else {
              // No stored signup data
              document.getElementById("form-message").innerText =
                "No account found. Please sign up first.";
            }
          });
      });
    </script>
  </body>
</html>


